<template>
    <div class="app-container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>用水量信息</span>
                    <span>单位:吨</span>
                </div>
            </template>
            <div class="box" id="waterUsed">
            </div>
        </el-card>

        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>用电量信息</span>
                    <span>单位:度</span>
                </div>
            </template>
            <div class="box" id="electricityUsed">
            </div>
        </el-card>

        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>水费 电费</span>
                    <span>单位:元</span>
                </div>
            </template>
            <div class="box" id="waterElectricityPrice">
            </div>
        </el-card>

        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>总费用信息</span>
                    <span>单位:元</span>
                </div>
            </template>
            <div class="box" id="sumPrice">
            </div>
        </el-card>
    </div>
</template>

<script setup name="studentFareInfo">
import { getWaterElectricityInfoApi } from '@/api/student';
const { proxy } = getCurrentInstance();

const months = reactive([])
const waterUsed = reactive([])
const electricityUsed = reactive([])
const waterPrice = reactive([])
const electricityPrice = reactive([])
const sumPrice = reactive([])


/**
 * 显示用水量
 * 显示用电量
 * 显示水费，电费 （堆叠）
 * 显示总费用
 */
const getData = () => {
    getWaterElectricityInfoApi().then(res => {
        if (res.code == 200) {
            const result = res.data.vo
            for (let index = 0; index < result.length; index++) {
                let item = result[index];
                months.push(item.time)
                waterUsed.push(item.waterConsum)
                waterPrice.push(item.waterCharge)
                electricityUsed.push(item.electricityConsum)
                electricityPrice.push(item.electricityCharge)
                sumPrice.push(item.waterCharge + item.electricityCharge)
                startDrawChart()
            }
        }
    })
}

getData()

let waterChart = null
let electricityChart = null
let waterElectricityPriceChart = null
let sumPriceChart = null

const defaultOption = reactive({
    tooltip: {},
    xAxis: {
        data: []
    },
    yAxis: {
    },
    grid: {
        top: "26px",
        left: "30px",
        right: "10px",
        bottom: "26px"
    },
    series: [
        {
            data: [],
            type: 'line',
            label: {
                show: true,
                position: 'top',
                textStyle: {
                    fontSize: 16
                }
            }
        }
    ]
})

onMounted(() => {
    waterChart = proxy.$echarts.init(document.getElementById("waterUsed"))
    waterChart.setOption(defaultOption);
    electricityChart = proxy.$echarts.init(document.getElementById("electricityUsed"))
    electricityChart.setOption(defaultOption);
    waterElectricityPriceChart = proxy.$echarts.init(document.getElementById("waterElectricityPrice"))
    waterElectricityPriceChart.setOption(defaultOption);
    sumPriceChart = proxy.$echarts.init(document.getElementById("sumPrice"))
    sumPriceChart.setOption(defaultOption);
})

const startDrawChart = () => {
    waterChart.setOption({
        xAxis: {
            type: 'category',
            data: months
        },
        series: [{
            data: waterUsed
        }]
    });
    electricityChart.setOption({
        xAxis: {
            type: 'category',
            data: months
        },
        series: [{
            data: electricityUsed,
            color: [
                '#9FE6B8'
            ]
        }]
    });
    waterElectricityPriceChart.setOption({
        xAxis: {
            type: 'category',
            data: months
        },
        series: [
            {
                data: waterPrice,
                type: 'line',
                stack: 'x',
                color: [
                    '#32C5E9'
                ],
                areaStyle: {}
            },
            {
                data: electricityPrice,
                type: 'line',
                stack: 'x',
                color: [
                    '#fb7293'
                ],
                areaStyle: {}
            }
        ]
    });
    sumPriceChart.setOption({
        xAxis: {
            type: 'category',
            data: months
        },
        series: [
            {
                type: 'bar',
                barWidth: '20%',
                color: '#FF9933',
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        fontSize: 16
                    }
                },
                data: sumPrice
            }
        ]
    });
}

window.addEventListener('resize', function () {
    waterChart.resize()
    electricityChart.resize()
    waterElectricityPriceChart.resize()
    sumPriceChart.resize()
});
</script>
<style lang="scss">
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box {
    width: 37vw;
    height: 24vh;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 40vw;
    float: left;
    margin: 2vh 1vw;
}
</style>
